<template>
    <div id="role">
        <el-button type="primary" @click="showAdd" >添加角色</el-button>
        <el-divider></el-divider>
        <el-table
                :data="tableData.rows"
                style="width: 100%"
                max-height="500"
                :row-class-name="tableRowClassName">

            <el-table-column
                    prop="id"
                    sortable
                    label="编号">
            </el-table-column>

            <el-table-column
                    prop="roleName"
                    label="角色名称">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="角色描述">
            </el-table-column>
            <el-table-column
                    prop="creator"
                    label="创建者">
            </el-table-column>

            <el-table-column
                    prop="gmtCreated"
                    sortable
                    label="创建时间">
            </el-table-column>

            <el-table-column
                    prop="modifier"
                    label="更新者">
            </el-table-column>

            <el-table-column
                    prop="gmtModified"
                    sortable
                    label="更新时间">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="showRoleMenu(scope.row)" type="text" size="small">分配菜单</el-button>
                    <el-button @click="showPermission(scope.row)" type="text" size="small">权限管理</el-button>
                    <el-button @click="showEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteRole(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, prev, pager, next,sizes"
                :page-size="tableData.size"
                :current-page="tableData.current"
                @current-change="requestData"
                @size-change="requestData"
                :total="tableData.total">
        </el-pagination>

        <el-dialog title="修改角色信息" :visible.sync="dialogEditVisible">
            <el-form :model="form">
                <el-form-item label="角色id" :label-width="'120px'" v-show="form.id !== null">
                    <el-input v-model="form.id" readonly></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="'120px'">
                    <el-input v-model="form.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="'120px'">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrEdit">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Role",
        data(){
            return{

                adminRole: "admin",

                adminExceptTip: "系统超级管理角色不能操作",


                form: {
                    id: null,
                    roleName: null,
                    description: null
                },
                dialogEditVisible: false,
                page: {
                    size: 10,
                    current: 1,
                    query: {
                        id: null,
                        roleName: null,
                        description: null
                    }
                },
                tableData: {
                    total: null,
                    size: 10,
                    current: 1,
                    rows: [{
                        id: null,
                        roleName: null,
                        description:null,
                        creator: null,
                        gmtCreated: null,
                        modifier: null,
                        gmtModified: null
                    }]
                },
                formRules: {
                    requires: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ]
                }
            }
        },
        methods:{
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            showEdit(row) {
                const roleName = row.roleName;
                if (roleName === this.adminRole) {
                    this.$message.error(this.adminExceptTip);
                    return;
                }
                this.dialogEditVisible = true;
                this.form = row;
            },
            showAdd(){
                this.form = {
                    id: null,
                    roleName: null,
                    description: null
                };
                this.dialogEditVisible  = true;
            },
            /*新增或编辑*/
            async addOrEdit() {
                let resp;
                if (this.form.id !== null){
                    resp = await this.$http.put("/sysRole/edit", this.form);
                }else {
                    resp = await this.$http.post("/sysRole/add", this.form);
                }
                let data = resp.data;
                console.log(data);
                if (data.code === 200) {
                    this.$message.success(data.info)
                } else {
                    this.$message.error(data.info);
                }
                this.requestData();
                this.dialogEditVisible = false;
            },
            deleteRole(index,row) {
                if (row.roleName === this.adminRole){
                    this.$message.error(this.adminExceptTip);
                    return;
                }
                this.$confirm('确定删除？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("/sysRole/delete/" + row.id).then(resp => {
                        const data = resp.data;
                        if (data.code === 200){
                            this.$message.success("删除成功");
                            this.tableData.rows.splice(index,1);
                        }else {
                            this.$message.error(data.info)
                        }
                    });
                }).catch(() => {
                })
            },
            async requestData() {
                const resp = await this.$http.post("/sysRole/getPage", this.page);
                //console.log(resp.data);
                const data = resp.data;
                this.tableData = data;
                if (data.code !== 200){
                    this.$message.error(data.info);
                }
            },
            showPermission(row){
                if (row.roleName === this.adminRole){
                    this.$message.error(this.adminExceptTip);
                    return;
                }
                this.$router.push({
                    path: "/sysPermission",
                    query: {
                        id: row.id,
                        roleName: row.roleName
                    }
                })
            },
            showRoleMenu(row){
                if(row.roleName === this.adminRole){
                    this.$message.error(this.adminExceptTip);
                    return;
                }
                this.$router.push({
                    path: "/sysRoleMenu",
                    query: {
                        id: row.id,
                        roleName: row.roleName
                    }
                })
            }
        }
        ,
        async created() {
            this.requestData();
        }
    }
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .cell{
        max-height: 50px !important;
        overflow: auto !important;
    }

</style>
